iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 6
1
自我挑戰組

30天資料整理系列 第 6

DAY06,從青蛙學習flex之1-4

  • 分享至 

  • xImage
  •  

接下來就是實戰練習了,就用flexboxfroggy來做演練吧
今天就先練習justify-content這個屬性
https://ithelp.ithome.com.tw/upload/images/20200919/20129570rHh3j1TBz5.png

輸入:

justify-content: flex-end;

這樣就過第一關了

https://ithelp.ithome.com.tw/upload/images/20200919/201295701AyUKDNrTp.png

輸入:

justify-content:center

這樣就過第二關了

https://ithelp.ithome.com.tw/upload/images/20200919/20129570pmy79sxTNB.png
荷葉跟荷葉間都有一個間距以及荷葉和外框也有間距:
這裡要注意的是space-around和space-between的差異
輸入:

justify-content:space-around

這樣就過第三關了

https://ithelp.ithome.com.tw/upload/images/20200919/2012957092ivioVw52.png
荷葉跟荷葉間都有一個間距:
依然是要注意的是space-around和space-between的差異
輸入:

 justify-content:space-between

這樣就過第四關了


上一篇
DAY05,flex內元件的屬性
下一篇
DAY07,從青蛙學習flex之5-7
系列文
30天資料整理30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言